<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv=X-UA-Compatible content="IE=edge,chrome=1">
    <meta content=always name=referrer>
    <link rel="stylesheet" type="text/css" href="__STATIC__/css/style_user.css">
    <script src="__STATIC__/js/jquery-1.8.2.js"></script>
    <title>找回密码</title>
</head>
<body>
<form action="" method="post" id="form" onsubmit="return false;">
<div class="wrap-pass">
    <div class="header">
        <p>找回密码</p>
        <img src="__STATIC__/img_user/back.png" class="back"
             {if condition="input('flag','') eq 'shop'"}
             onclick=window.location.href="{:url('mobile/shop_auth/login')}";>
            {else/}
             onclick=window.location.href="{:url('mobile/user_port/login')}";>
            {/if}
    </div>
    <div class="center">
        <div>
            <label>手机号</label><input class="text" type="number" name='username' placeholder="请输入手机号" datatype="m" errormsg="手机号码格式不正确" nullmsg="手机号码不能为空">
        </div>
        <div>
            <label>验证码</label><input class="text" type="number" name="yzm"  placeholder="请输入验证码" datatype="n6" errormsg="请填写6位验证码" nullmsg="请填写验证码">
            <input type="hidden" name="act" value="nextStep" />
            <span><a href="javascript:check_num();" id="yzm">获取验证码</a></span>
        </div>
    </div>
    <input type="submit" class="submit" id="sub" value="下一步">
</div>
</form>
{include file="public/src" /}
<script>
    //验证表单元素
    $(function () {
        $.Datatype.n6 = /^\d{6}$/;
        $.Tipmsg.r = null;
        $.Tipmsg.p = null;
        var demo = $("#form").Validform({
            tiptype: function (msg) {
                layer.open({content: msg, skin: 'msg', time:2});
            },
            btnSubmit:'#sub',
            tipSweep: true,
            ajaxPost:true,
            callback:function(t){
                if (t.code == 200){
                    layer.open({content:t.message,skin:'msg',time:2});
                    setTimeout(function () {
                      window.location.href = "reset_pwd?flag={:input('flag','')}";
                    },2000)
                }else{
                    layer.open({content:t.message,skin:'msg',time:2});
                }
            }
        });
        demo.config({
            ajaxpost:{
                error: function () {
                    layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
                }
            }
        })
    });
    //发送验证码
    function check_num(){
        var tel = $("[name='username']").val();
        if (tel == ''){
            layer.open({content: '请输入要找回密码的手机号码', skin: 'msg', time:2});
            return false;
        }
        if (!(/^1(3|4|5|7|8)\d{9}$/.test(tel))){
            layer.open({content: '手机号码格式不正确', skin: 'msg', time:2});
            return false;
        }
        if (!check_unique(tel)){
            return false;
        }
        count_down();
        $.ajax({
            url:"{:url('mobile/user_port/getVerif')}",
            dataType:'json',
            type:'post',
            data:{'tel':tel},
            success:function(t){
                if (t.code != 200){
                    layer.open({content: t.message,btn: '我知道了'});
                }else {
                    layer.open({content:t.message,skin:'msg',time:2});
                }
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        })
    }
    //验证码倒计时
    function count_down(){
        var num = 60;
        var verif = $('#yzm');
        var timer = setInterval(function(){
            verif.text(num+'秒');
            if (num <=60 && num >= 1){
                verif.removeAttr('href');
            }else{
                verif.text('重新获取验证码');
                window.clearInterval(timer);
                verif.attr("href",'javascript:check_num(this.id);');
            }
            num--;
        },1000);
    }
    //检测找回密码的手机号码是否存在
    function check_unique(tel){
        var flag = true;
        $.ajax({
            url:"{:url('mobile/user_port/find_pwd')}",
            type:'post',
            async:false,
            dateType:'json',
            data:{'tel':tel,'act':'detection'},
            success:function(t){
                if (t.code == 0){
                    layer.open({content: t.message,skin: 'msg',time:2});
                    flag = false;
                }
            },
            error: function () {
                layer.open({content:'网络繁忙,请重试',skin:'msg',time:2});
            }
        });
        return flag;
    }
</script>
</body>
</html>